<template>
  <div class="profile-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <Breadcrumb :items="breadcrumbItems" />
        <div class="header-content">
          <div class="user-info">
            <el-avatar
              :src="userStore.userInfo.avatar"
              :size="80"
              class="user-avatar"
            >
              {{ userStore.userInfo.name?.charAt(0) }}
            </el-avatar>
            <div class="user-details">
              <h1 class="user-name">{{ userStore.userInfo.name }}</h1>
              <p class="user-title">{{ userStore.userInfo.title || '学员' }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-value">{{ userStore.userInfo.courseCount || 0 }}</span>
                  <span class="stat-label">学习课程</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ userStore.userInfo.examCount || 0 }}</span>
                  <span class="stat-label">完成考试</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ userStore.userInfo.certificateCount || 0 }}</span>
                  <span class="stat-label">获得证书</span>
                </div>
                <div class="stat-item">
                  <span class="stat-value">{{ userStore.userInfo.studyDays || 0 }}</span>
                  <span class="stat-label">学习天数</span>
                </div>
              </div>
            </div>
          </div>
          <div class="header-actions">
            <el-button type="primary" @click="editProfile">
              编辑资料
            </el-button>
            <el-button @click="viewSettings">
              设置
            </el-button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容 -->
    <div class="profile-content">
      <div class="container">
        <div class="content-layout">
          <!-- 侧边导航 -->
          <div class="sidebar">
            <el-menu
              v-model:default-active="activeTab"
              class="profile-menu"
              @select="handleMenuSelect"
            >
              <el-menu-item index="overview">
                <el-icon><User /></el-icon>
                <span>概览</span>
              </el-menu-item>
              <el-menu-item index="courses">
                <el-icon><Reading /></el-icon>
                <span>我的课程</span>
              </el-menu-item>
              <el-menu-item index="exams">
                <el-icon><EditPen /></el-icon>
                <span>考试记录</span>
              </el-menu-item>
              <el-menu-item index="certificates">
                <el-icon><Medal /></el-icon>
                <span>我的证书</span>
              </el-menu-item>
              <el-menu-item index="favorites">
                <el-icon><Star /></el-icon>
                <span>收藏夹</span>
              </el-menu-item>
              <el-menu-item index="notes">
                <el-icon><Document /></el-icon>
                <span>学习笔记</span>
              </el-menu-item>
              <el-menu-item index="settings">
                <el-icon><Setting /></el-icon>
                <span>账户设置</span>
              </el-menu-item>
            </el-menu>
          </div>
          
          <!-- 主要内容区域 -->
          <div class="main-content">
            <!-- 概览 -->
            <div v-if="activeTab === 'overview'" class="overview-section">
              <div class="section-header">
                <h2 class="section-title">学习概览</h2>
              </div>
              
              <!-- 学习进度 -->
              <div class="progress-cards">
                <div class="progress-card">
                  <div class="card-header">
                    <h3>本周学习时长</h3>
                    <el-icon class="card-icon"><Clock /></el-icon>
                  </div>
                  <div class="card-content">
                    <div class="progress-value">{{ weeklyStudyTime }}小时</div>
                    <div class="progress-target">目标: 10小时</div>
                    <el-progress
                      :percentage="(weeklyStudyTime / 10) * 100"
                      :stroke-width="8"
                      :show-text="false"
                    />
                  </div>
                </div>
                
                <div class="progress-card">
                  <div class="card-header">
                    <h3>课程完成度</h3>
                    <el-icon class="card-icon"><Reading /></el-icon>
                  </div>
                  <div class="card-content">
                    <div class="progress-value">{{ courseCompletionRate }}%</div>
                    <div class="progress-target">{{ completedCourses }}/{{ totalCourses }} 门课程</div>
                    <el-progress
                      :percentage="courseCompletionRate"
                      :stroke-width="8"
                      :show-text="false"
                    />
                  </div>
                </div>
                
                <div class="progress-card">
                  <div class="card-header">
                    <h3>考试通过率</h3>
                    <el-icon class="card-icon"><EditPen /></el-icon>
                  </div>
                  <div class="card-content">
                    <div class="progress-value">{{ examPassRate }}%</div>
                    <div class="progress-target">{{ passedExams }}/{{ totalExams }} 场考试</div>
                    <el-progress
                      :percentage="examPassRate"
                      :stroke-width="8"
                      :show-text="false"
                    />
                  </div>
                </div>
                
                <div class="progress-card">
                  <div class="card-header">
                    <h3>学习排名</h3>
                    <el-icon class="card-icon"><Trophy /></el-icon>
                  </div>
                  <div class="card-content">
                    <div class="progress-value">第{{ studyRank }}名</div>
                    <div class="progress-target">超过{{ rankPercentage }}%的学员</div>
                    <el-progress
                      :percentage="rankPercentage"
                      :stroke-width="8"
                      :show-text="false"
                    />
                  </div>
                </div>
              </div>
              
              <!-- 最近学习 -->
              <div class="recent-study">
                <div class="section-header">
                  <h3>最近学习</h3>
                  <el-button type="primary" text @click="viewAllCourses">
                    查看全部
                  </el-button>
                </div>
                
                <div class="recent-courses">
                  <div
                    v-for="course in recentCourses"
                    :key="course.id"
                    class="recent-course-item"
                    @click="continueCourse(course.id)"
                  >
                    <img
                      :src="course.cover"
                      :alt="course.title"
                      class="course-cover"
                    />
                    <div class="course-info">
                      <div class="course-title">{{ course.title }}</div>
                      <div class="course-progress">
                        <span class="progress-text">进度: {{ course.progress }}%</span>
                        <el-progress
                          :percentage="course.progress"
                          :stroke-width="4"
                          :show-text="false"
                        />
                      </div>
                      <div class="course-meta">
                        <span class="last-study">{{ formatDate(course.lastStudyAt) }}</span>
                      </div>
                    </div>
                    <div class="course-actions">
                      <el-button type="primary" size="small">
                        继续学习
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 学习成就 -->
              <div class="achievements">
                <div class="section-header">
                  <h3>学习成就</h3>
                </div>
                
                <div class="achievement-list">
                  <div
                    v-for="achievement in achievements"
                    :key="achievement.id"
                    class="achievement-item"
                    :class="{ unlocked: achievement.unlocked }"
                  >
                    <div class="achievement-icon">
                      <el-icon :size="32">
                        <component :is="achievement.icon" />
                      </el-icon>
                    </div>
                    <div class="achievement-info">
                      <div class="achievement-title">{{ achievement.title }}</div>
                      <div class="achievement-desc">{{ achievement.description }}</div>
                      <div v-if="achievement.unlocked" class="achievement-date">
                        {{ formatDate(achievement.unlockedAt) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 我的课程 -->
            <div v-else-if="activeTab === 'courses'" class="courses-section">
              <div class="section-header">
                <h2 class="section-title">我的课程</h2>
                <div class="section-actions">
                  <el-select v-model="courseFilter" @change="filterCourses">
                    <el-option label="全部课程" value="all" />
                    <el-option label="学习中" value="learning" />
                    <el-option label="已完成" value="completed" />
                    <el-option label="未开始" value="not_started" />
                  </el-select>
                </div>
              </div>
              
              <div class="courses-grid">
                <CourseCard
                  v-for="course in filteredCourses"
                  :key="course.id"
                  :course="course"
                  view-mode="grid"
                  :show-progress="true"
                  @click="viewCourse(course.id)"
                  @continue="continueCourse(course.id)"
                />
              </div>
              
              <div v-if="filteredCourses.length === 0" class="empty-state">
                <el-empty description="暂无课程" />
              </div>
            </div>
            
            <!-- 考试记录 -->
            <div v-else-if="activeTab === 'exams'" class="exams-section">
              <div class="section-header">
                <h2 class="section-title">考试记录</h2>
                <div class="section-actions">
                  <el-select v-model="examFilter" @change="filterExams">
                    <el-option label="全部考试" value="all" />
                    <el-option label="已通过" value="passed" />
                    <el-option label="未通过" value="failed" />
                    <el-option label="进行中" value="in_progress" />
                  </el-select>
                </div>
              </div>
              
              <div class="exams-list">
                <div
                  v-for="exam in filteredExams"
                  :key="exam.id"
                  class="exam-record-item"
                  @click="viewExamResult(exam.id)"
                >
                  <div class="exam-info">
                    <div class="exam-title">{{ exam.title }}</div>
                    <div class="exam-meta">
                      <span class="exam-date">{{ formatDate(exam.completedAt) }}</span>
                      <span class="exam-duration">用时: {{ exam.duration }}分钟</span>
                    </div>
                  </div>
                  <div class="exam-result">
                    <div class="score">
                      <span class="score-value">{{ exam.score }}</span>
                      <span class="score-unit">分</span>
                    </div>
                    <el-tag
                      :type="exam.passed ? 'success' : 'danger'"
                      size="small"
                    >
                      {{ exam.passed ? '通过' : '未通过' }}
                    </el-tag>
                  </div>
                </div>
              </div>
              
              <div v-if="filteredExams.length === 0" class="empty-state">
                <el-empty description="暂无考试记录" />
              </div>
            </div>
            
            <!-- 我的证书 -->
            <div v-else-if="activeTab === 'certificates'" class="certificates-section">
              <div class="section-header">
                <h2 class="section-title">我的证书</h2>
              </div>
              
              <div class="certificates-grid">
                <div
                  v-for="certificate in certificates"
                  :key="certificate.id"
                  class="certificate-item"
                  @click="viewCertificate(certificate.id)"
                >
                  <div class="certificate-preview">
                    <img
                      :src="certificate.preview"
                      :alt="certificate.title"
                      class="certificate-image"
                    />
                    <div class="certificate-overlay">
                      <el-icon :size="40" color="#fff">
                        <View />
                      </el-icon>
                    </div>
                  </div>
                  <div class="certificate-info">
                    <div class="certificate-title">{{ certificate.title }}</div>
                    <div class="certificate-meta">
                      <span class="issue-date">{{ formatDate(certificate.issuedAt) }}</span>
                      <span class="certificate-id">证书编号: {{ certificate.certificateId }}</span>
                    </div>
                  </div>
                  <div class="certificate-actions">
                    <el-button size="small" @click.stop="downloadCertificate(certificate.id)">
                      下载
                    </el-button>
                    <el-button size="small" @click.stop="shareCertificate(certificate.id)">
                      分享
                    </el-button>
                  </div>
                </div>
              </div>
              
              <div v-if="certificates.length === 0" class="empty-state">
                <el-empty description="暂无证书" />
              </div>
            </div>
            
            <!-- 收藏夹 -->
            <div v-else-if="activeTab === 'favorites'" class="favorites-section">
              <div class="section-header">
                <h2 class="section-title">收藏夹</h2>
              </div>
              
              <div class="favorites-grid">
                <CourseCard
                  v-for="course in favoriteCourses"
                  :key="course.id"
                  :course="course"
                  view-mode="grid"
                  @click="viewCourse(course.id)"
                  @favorite="handleUnfavorite"
                />
              </div>
              
              <div v-if="favoriteCourses.length === 0" class="empty-state">
                <el-empty description="暂无收藏的课程" />
              </div>
            </div>
            
            <!-- 学习笔记 -->
            <div v-else-if="activeTab === 'notes'" class="notes-section">
              <div class="section-header">
                <h2 class="section-title">学习笔记</h2>
                <el-button type="primary" @click="createNote">
                  新建笔记
                </el-button>
              </div>
              
              <div class="notes-list">
                <div
                  v-for="note in notes"
                  :key="note.id"
                  class="note-item"
                  @click="editNote(note.id)"
                >
                  <div class="note-content">
                    <div class="note-title">{{ note.title }}</div>
                    <div class="note-excerpt">{{ note.excerpt }}</div>
                    <div class="note-meta">
                      <span class="note-course">{{ note.courseName }}</span>
                      <span class="note-date">{{ formatDate(note.updatedAt) }}</span>
                    </div>
                  </div>
                  <div class="note-actions">
                    <el-button size="small" text @click.stop="editNote(note.id)">
                      编辑
                    </el-button>
                    <el-button size="small" text type="danger" @click.stop="deleteNote(note.id)">
                      删除
                    </el-button>
                  </div>
                </div>
              </div>
              
              <div v-if="notes.length === 0" class="empty-state">
                <el-empty description="暂无学习笔记" />
              </div>
            </div>
            
            <!-- 账户设置 -->
            <div v-else-if="activeTab === 'settings'" class="settings-section">
              <div class="section-header">
                <h2 class="section-title">账户设置</h2>
              </div>
              
              <div class="settings-content">
                <el-form
                  ref="settingsForm"
                  :model="settingsData"
                  :rules="settingsRules"
                  label-width="120px"
                  class="settings-form"
                >
                  <el-form-item label="头像">
                    <div class="avatar-upload">
                      <el-avatar
                        :src="settingsData.avatar"
                        :size="80"
                        class="avatar-preview"
                      >
                        {{ settingsData.name?.charAt(0) }}
                      </el-avatar>
                      <el-button @click="uploadAvatar">更换头像</el-button>
                    </div>
                  </el-form-item>
                  
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="settingsData.name" />
                  </el-form-item>
                  
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="settingsData.email" disabled />
                  </el-form-item>
                  
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="settingsData.phone" />
                  </el-form-item>
                  
                  <el-form-item label="个人简介">
                    <el-input
                      v-model="settingsData.bio"
                      type="textarea"
                      :rows="4"
                      placeholder="介绍一下自己..."
                    />
                  </el-form-item>
                  
                  <el-form-item label="学习目标">
                    <el-input
                      v-model="settingsData.goal"
                      placeholder="设定您的学习目标..."
                    />
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="saveSettings">
                      保存设置
                    </el-button>
                    <el-button @click="resetSettings">
                      重置
                    </el-button>
                  </el-form-item>
                </el-form>
                
                <el-divider />
                
                <div class="password-section">
                  <h3>修改密码</h3>
                  <el-form
                    ref="passwordForm"
                    :model="passwordData"
                    :rules="passwordRules"
                    label-width="120px"
                    class="password-form"
                  >
                    <el-form-item label="当前密码" prop="currentPassword">
                      <el-input
                        v-model="passwordData.currentPassword"
                        type="password"
                        show-password
                      />
                    </el-form-item>
                    
                    <el-form-item label="新密码" prop="newPassword">
                      <el-input
                        v-model="passwordData.newPassword"
                        type="password"
                        show-password
                      />
                    </el-form-item>
                    
                    <el-form-item label="确认密码" prop="confirmPassword">
                      <el-input
                        v-model="passwordData.confirmPassword"
                        type="password"
                        show-password
                      />
                    </el-form-item>
                    
                    <el-form-item>
                      <el-button type="primary" @click="changePassword">
                        修改密码
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  User, Reading, EditPen, Medal, Star, Document, Setting, Clock,
  Trophy, View
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { useCourseStore } from '@/stores/course'
import { useExamStore } from '@/stores/exam'
import Breadcrumb from '@/components/common/Breadcrumb.vue'
import CourseCard from '@/components/course/CourseCard.vue'
import { formatDate } from '@/utils/format'

const router = useRouter()
const userStore = useUserStore()
const courseStore = useCourseStore()
const examStore = useExamStore()

// 响应式数据
const activeTab = ref('overview')
const courseFilter = ref('all')
const examFilter = ref('all')

// 学习数据
const weeklyStudyTime = ref(8.5)
const courseCompletionRate = ref(75)
const completedCourses = ref(12)
const totalCourses = ref(16)
const examPassRate = ref(85)
const passedExams = ref(17)
const totalExams = ref(20)
const studyRank = ref(156)
const rankPercentage = ref(78)

// 数据列表
const recentCourses = ref([])
const myCourses = ref([])
const myExams = ref([])
const certificates = ref([])
const favoriteCourses = ref([])
const notes = ref([])
const achievements = ref([])

// 设置表单
const settingsData = reactive({
  name: '',
  email: '',
  phone: '',
  avatar: '',
  bio: '',
  goal: ''
})

const passwordData = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 面包屑导航
const breadcrumbItems = ref([
  { title: '首页', path: '/' },
  { title: '个人中心', path: '/profile' }
])

// 表单验证规则
const settingsRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const passwordRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordData.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 计算属性
const filteredCourses = computed(() => {
  if (courseFilter.value === 'all') {
    return myCourses.value
  }
  return myCourses.value.filter(course => course.status === courseFilter.value)
})

const filteredExams = computed(() => {
  if (examFilter.value === 'all') {
    return myExams.value
  }
  if (examFilter.value === 'passed') {
    return myExams.value.filter(exam => exam.passed)
  }
  if (examFilter.value === 'failed') {
    return myExams.value.filter(exam => !exam.passed)
  }
  return myExams.value.filter(exam => exam.status === examFilter.value)
})

// 方法
const handleMenuSelect = (index) => {
  activeTab.value = index
}

const editProfile = () => {
  activeTab.value = 'settings'
}

const viewSettings = () => {
  activeTab.value = 'settings'
}

const viewAllCourses = () => {
  activeTab.value = 'courses'
}

const viewCourse = (courseId) => {
  router.push(`/courses/${courseId}`)
}

const continueCourse = (courseId) => {
  router.push(`/learn/${courseId}`)
}

const viewExamResult = (examId) => {
  router.push(`/exam/${examId}/result`)
}

const viewCertificate = (certificateId) => {
  // 打开证书查看对话框或新页面
  window.open(`/certificate/${certificateId}`, '_blank')
}

const downloadCertificate = async (certificateId) => {
  try {
    // 下载证书逻辑
    ElMessage.success('证书下载中...')
  } catch (error) {
    ElMessage.error('下载失败')
  }
}

const shareCertificate = (certificateId) => {
  // 分享证书逻辑
  const shareUrl = `${window.location.origin}/certificate/${certificateId}`
  navigator.clipboard.writeText(shareUrl).then(() => {
    ElMessage.success('分享链接已复制到剪贴板')
  })
}

const handleUnfavorite = async (courseId) => {
  try {
    await courseStore.unfavoriteCourse(courseId)
    // 从收藏列表中移除
    const index = favoriteCourses.value.findIndex(c => c.id === courseId)
    if (index > -1) {
      favoriteCourses.value.splice(index, 1)
    }
    ElMessage.success('已取消收藏')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const createNote = () => {
  router.push('/notes/create')
}

const editNote = (noteId) => {
  router.push(`/notes/${noteId}/edit`)
}

const deleteNote = async (noteId) => {
  try {
    await ElMessageBox.confirm('确定要删除这条笔记吗？', '确认删除', {
      type: 'warning'
    })
    
    // 删除笔记逻辑
    const index = notes.value.findIndex(n => n.id === noteId)
    if (index > -1) {
      notes.value.splice(index, 1)
    }
    
    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const uploadAvatar = () => {
  // 上传头像逻辑
  ElMessage.info('头像上传功能开发中...')
}

const saveSettings = async () => {
  try {
    // 保存设置逻辑
    await userStore.updateProfile(settingsData)
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

const resetSettings = () => {
  // 重置设置
  Object.assign(settingsData, userStore.userInfo)
}

const changePassword = async () => {
  try {
    // 修改密码逻辑
    await userStore.changePassword(passwordData)
    
    // 清空表单
    Object.assign(passwordData, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    ElMessage.success('密码修改成功')
  } catch (error) {
    ElMessage.error('密码修改失败')
  }
}

const filterCourses = () => {
  // 筛选课程逻辑已在计算属性中处理
}

const filterExams = () => {
  // 筛选考试逻辑已在计算属性中处理
}

// 初始化数据
const initializeData = async () => {
  try {
    // 获取用户信息
    Object.assign(settingsData, userStore.userInfo)
    
    // 获取最近学习的课程
    recentCourses.value = [
      {
        id: 1,
        title: 'Vue.js 3.0 完整教程',
        cover: '/images/course1.jpg',
        progress: 65,
        lastStudyAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000)
      },
      {
        id: 2,
        title: 'React 18 新特性详解',
        cover: '/images/course2.jpg',
        progress: 30,
        lastStudyAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000)
      }
    ]
    
    // 获取学习成就
    achievements.value = [
      {
        id: 1,
        title: '初学者',
        description: '完成第一门课程',
        icon: 'Medal',
        unlocked: true,
        unlockedAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
      },
      {
        id: 2,
        title: '勤奋学习者',
        description: '连续学习7天',
        icon: 'Trophy',
        unlocked: true,
        unlockedAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000)
      },
      {
        id: 3,
        title: '考试达人',
        description: '通过10场考试',
        icon: 'Star',
        unlocked: false
      }
    ]
    
    // 获取其他数据...
    await Promise.all([
      fetchMyCourses(),
      fetchMyExams(),
      fetchCertificates(),
      fetchFavoriteCourses(),
      fetchNotes()
    ])
  } catch (error) {
    console.error('初始化数据失败:', error)
  }
}

const fetchMyCourses = async () => {
  // 获取我的课程
  myCourses.value = []
}

const fetchMyExams = async () => {
  // 获取考试记录
  myExams.value = []
}

const fetchCertificates = async () => {
  // 获取证书
  certificates.value = []
}

const fetchFavoriteCourses = async () => {
  // 获取收藏的课程
  favoriteCourses.value = []
}

const fetchNotes = async () => {
  // 获取学习笔记
  notes.value = []
}

// 生命周期
onMounted(() => {
  initializeData()
})
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 页面头部
.page-header {
  background: var(--el-bg-color);
  padding: 20px 0 40px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 20px;
      
      .user-details {
        .user-name {
          font-size: 1.8rem;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
        }
        
        .user-title {
          color: var(--el-text-color-regular);
          margin-bottom: 16px;
        }
        
        .user-stats {
          display: flex;
          gap: 32px;
          
          .stat-item {
            text-align: center;
            
            .stat-value {
              display: block;
              font-size: 1.5rem;
              font-weight: 600;
              color: var(--el-color-primary);
              margin-bottom: 4px;
            }
            
            .stat-label {
              color: var(--el-text-color-secondary);
              font-size: 14px;
            }
          }
        }
      }
    }
    
    .header-actions {
      display: flex;
      gap: 12px;
    }
  }
}

// 主要内容
.profile-content {
  padding: 40px 0;
  
  .content-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    
    .sidebar {
      .profile-menu {
        background: var(--el-bg-color);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        
        :deep(.el-menu-item) {
          height: 48px;
          line-height: 48px;
          
          &.is-active {
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
          }
        }
      }
    }
    
    .main-content {
      background: var(--el-bg-color);
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      padding: 32px;
      
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        
        .section-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin: 0;
        }
      }
    }
  }
}

// 概览部分
.overview-section {
  .progress-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    
    .progress-card {
      background: var(--el-bg-color-page);
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      padding: 20px;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        h3 {
          font-size: 14px;
          font-weight: 500;
          color: var(--el-text-color-regular);
          margin: 0;
        }
        
        .card-icon {
          color: var(--el-color-primary);
        }
      }
      
      .card-content {
        .progress-value {
          font-size: 1.8rem;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
        }
        
        .progress-target {
          color: var(--el-text-color-secondary);
          font-size: 12px;
          margin-bottom: 12px;
        }
      }
    }
  }
  
  .recent-study {
    margin-bottom: 40px;
    
    .recent-courses {
      .recent-course-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        margin-bottom: 12px;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          border-color: var(--el-color-primary);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .course-cover {
          width: 80px;
          height: 60px;
          object-fit: cover;
          border-radius: 6px;
          flex-shrink: 0;
        }
        
        .course-info {
          flex: 1;
          
          .course-title {
            font-weight: 500;
            color: var(--el-text-color-primary);
            margin-bottom: 8px;
          }
          
          .course-progress {
            margin-bottom: 6px;
            
            .progress-text {
              font-size: 12px;
              color: var(--el-text-color-secondary);
              margin-bottom: 4px;
              display: block;
            }
          }
          
          .course-meta {
            .last-study {
              font-size: 12px;
              color: var(--el-text-color-secondary);
            }
          }
        }
        
        .course-actions {
          flex-shrink: 0;
        }
      }
    }
  }
  
  .achievements {
    .achievement-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      
      .achievement-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        opacity: 0.5;
        
        &.unlocked {
          opacity: 1;
          background: var(--el-color-success-light-9);
          border-color: var(--el-color-success-light-5);
        }
        
        .achievement-icon {
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--el-color-primary-light-9);
          border-radius: 50%;
          color: var(--el-color-primary);
          flex-shrink: 0;
        }
        
        .achievement-info {
          .achievement-title {
            font-weight: 500;
            color: var(--el-text-color-primary);
            margin-bottom: 4px;
          }
          
          .achievement-desc {
            color: var(--el-text-color-regular);
            font-size: 14px;
            margin-bottom: 4px;
          }
          
          .achievement-date {
            color: var(--el-text-color-secondary);
            font-size: 12px;
          }
        }
      }
    }
  }
}

// 课程部分
.courses-section {
  .courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

// 考试记录
.exams-section {
  .exams-list {
    .exam-record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        border-color: var(--el-color-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      .exam-info {
        .exam-title {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 8px;
        }
        
        .exam-meta {
          display: flex;
          gap: 16px;
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
      }
      
      .exam-result {
        display: flex;
        align-items: center;
        gap: 12px;
        
        .score {
          text-align: center;
          
          .score-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--el-text-color-primary);
          }
          
          .score-unit {
            font-size: 12px;
            color: var(--el-text-color-secondary);
          }
        }
      }
    }
  }
}

// 证书部分
.certificates-section {
  .certificates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    
    .certificate-item {
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        border-color: var(--el-color-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
        .certificate-overlay {
          opacity: 1;
        }
      }
      
      .certificate-preview {
        position: relative;
        height: 200px;
        
        .certificate-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .certificate-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s;
        }
      }
      
      .certificate-info {
        padding: 16px;
        
        .certificate-title {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 8px;
        }
        
        .certificate-meta {
          color: var(--el-text-color-secondary);
          font-size: 14px;
          
          .issue-date {
            display: block;
            margin-bottom: 4px;
          }
          
          .certificate-id {
            font-size: 12px;
          }
        }
      }
      
      .certificate-actions {
        padding: 0 16px 16px;
        display: flex;
        gap: 8px;
      }
    }
  }
}

// 收藏夹
.favorites-section {
  .favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

// 学习笔记
.notes-section {
  .notes-list {
    .note-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        border-color: var(--el-color-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      .note-content {
        flex: 1;
        
        .note-title {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 8px;
        }
        
        .note-excerpt {
          color: var(--el-text-color-regular);
          line-height: 1.5;
          margin-bottom: 8px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .note-meta {
          display: flex;
          gap: 16px;
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
      }
      
      .note-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
      }
    }
  }
}

// 设置部分
.settings-section {
  .settings-content {
    max-width: 600px;
    
    .avatar-upload {
      display: flex;
      align-items: center;
      gap: 16px;
      
      .avatar-preview {
        flex-shrink: 0;
      }
    }
    
    .password-section {
      margin-top: 32px;
      
      h3 {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 20px;
      }
    }
  }
}

// 空状态
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

// 响应式设计
@media (max-width: 1024px) {
  .profile-content {
    .content-layout {
      grid-template-columns: 1fr;
      gap: 24px;
      
      .sidebar {
        order: 1;
        
        .profile-menu {
          :deep(.el-menu) {
            display: flex;
            overflow-x: auto;
            
            .el-menu-item {
              flex-shrink: 0;
              white-space: nowrap;
            }
          }
        }
      }
      
      .main-content {
        order: 2;
      }
    }
  }
  
  .page-header {
    .header-content {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      
      .user-info {
        .user-stats {
          gap: 20px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  
  .page-header {
    padding: 16px 0 24px;
    
    .header-content {
      .user-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        
        .user-stats {
          justify-content: center;
        }
      }
    }
  }
  
  .profile-content {
    padding: 24px 0;
    
    .content-layout {
      .main-content {
        padding: 20px;
      }
    }
  }
  
  .overview-section {
    .progress-cards {
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }
    
    .recent-study {
      .recent-courses {
        .recent-course-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          
          .course-cover {
            width: 100%;
            height: 120px;
          }
        }
      }
    }
    
    .achievements {
      .achievement-list {
        grid-template-columns: 1fr;
      }
    }
  }
  
  .courses-section {
    .courses-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
  }
  
  .certificates-section {
    .certificates-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .favorites-section {
    .favorites-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
  }
}

@media (max-width: 480px) {
  .page-header {
    .header-content {
      .user-info {
        .user-stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
          width: 100%;
        }
      }
      
      .header-actions {
        width: 100%;
        justify-content: center;
      }
    }
  }
  
  .overview-section {
    .progress-cards {
      grid-template-columns: 1fr;
    }
  }
  
  .courses-section {
    .courses-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .favorites-section {
    .favorites-grid {
      grid-template-columns: 1fr;
    }
  }
  
  .exams-section {
    .exams-list {
      .exam-record-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        
        .exam-result {
          align-self: flex-end;
        }
      }
    }
  }
  
  .notes-section {
    .notes-list {
      .note-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        
        .note-actions {
          align-self: flex-end;
        }
      }
    }
  }
}
</style>